/*
 * @Author: xiaosihan 
 * @Date: 2022-09-27 15:11:56 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2022-09-27 15:45:44
 */

import homeStore from "./languageStore";
import { LangugeType } from "./type";
import { autorun, IReactionDisposer } from "mobx";
import { Component } from "react";
import langConfig from "./langConfig";


interface Props extends React.HTMLAttributes<HTMLSpanElement> {

    id: keyof typeof langConfig.langJSON
}

interface State {
    lang: LangugeType
}


/**
 * 多语言组建  <Language key="">  Language.getMessage("")
 * @export
 * @class Language
 * @extends {Component}
 */
export default class Language extends Component<Props, State>{

    constructor(props: Props) {
        super(props);
    }

    // 获取多语言文本
    static getMessage(id: keyof typeof langConfig.langJSON) {
        return langConfig.getMessage(id);
    }

    state = {
        lang: homeStore.lang
    }

    dispose!: IReactionDisposer;

    componentDidMount() {
        this.dispose = autorun(() => {
            this.forceUpdate();
        });
    }

    componentWillUnmount(): void {
        this.dispose();
    }

    render() {
        const { id, ...spanProps } = this.props;
        return (
            <span {...spanProps}>
                {langConfig.getMessage(id)}
            </span>
        );
    }


}